<script>
Vue.component('tally-header', {
    template: `
 <el-row>
    <el-scrollbar style="background-color: #3396fa;">
        <span id="tallyList">
            <el-row class="currentTally" style="padding:10px 0;display:flex">
                <el-col :xl="16" :lg="16" :xl="16" :xs="16" :sm="16" style="text-align: left;padding-left: 20px;">
                        <el-dropdown trigger="click"
                                 @command="tallyChangeCommand">
                          <span class="el-dropdown-link">
                            <h3 style="display:flex;align-items:center"><i class="el-icon-notebook-2"></i>
                            {{currentTally.title}}
                            <span v-if="currentTallyId != 0 && userData['vip_status'] != 1" >
                                <img src="/public/images/huiyuan_se.png" v-if="day > 0 ">
                                <img src="/public/images/huiyuan_icon.png" v-else>
                            </span>

                            <i class="el-icon-arrow-down el-icon--right"></i></h3>
                          </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item icon="el-icon-notebook-2" v-for="(item, index) in tallyList"
                                              :command="item.id"
                                              :key="item.title"
                                              :label="item.title"
                                              :value="item.id">
                                <span>{{ item.title }} </span>
                                <span style="color: #8492a6; font-size: 12px;">
                                    <el-tag effect="plain" size="mini">
                                       {{ item.role_name }}
                                    </el-tag>
                                     {{ item.company_title }}
                                </span>
                            </el-dropdown-item>
                            <el-dropdown-item divided v-if="currentTallyId != 0 && userData['vip_status'] != 1">
                               <el-link href="tallyList"><i class="el-icon-folder-opened"></i> 账本管理</el-link>
                           </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

                    <el-button round size="mini" @click="tallyAddDialog=true" style="margin-left:20px;" v-if="currentTallyId != 0 && userData['vip_status'] != 1"><i class="el-icon-folder-add"></i> 新增账本</el-button>


                    <span v-if="currentTallyId != 0 && userData['vip_status'] != 1">
                        <el-popover
                            placement="top-start"
                            width="300"
                            trigger="hover">
                        <el-button size="mini" slot="reference" round  style="margin-left: 20px;color: #66b1ff;" >
                            <i class="el-icon-mobile-phone"></i> APP下载
                        </el-button>
                        <div class="qabox">
                            <el-alert
                                    title="关注“公司账”微信，下载手机APP"
                                    type="info"
                                    :closable="false"
                                    show-icon>
                            </el-alert>
                            <p class="tc">
                                <el-image
                                        style="width: 280px;"
                                        src="/public/images/wechat.jpg"
                                        fit="cover"></el-image>
                            </p>
                        </div>
                    </el-popover>
                    </span>
                    <span v-if="currentTallyId != 0 && userData['vip_status'] != 1">
                    <el-popover
                            placement="top-start"
                            width="300"
                            trigger="hover">
                        <el-button size="mini" slot="reference" round  style="margin-left: 20px;color: #F56C6C;" >
                            <i class="el-icon-question"></i> 问题反馈
                        </el-button>
                        <div class="qabox">
                            <el-alert
                                    title="如使用中遇到问题、产品建议，用户交流群，添加客服进行反馈，请备注“公司账”，感谢支持"
                                    type="info"
                                    :closable="false"
                                    show-icon>
                            </el-alert>
                            <p class="tc">
                                <el-image
                                        style="width: 280px;"
                                        src="/public/images/kf.jpg"
                                        fit="cover"></el-image>
                            </p>
                        </div>
                    </el-popover>
                    </span>

                    <el-button round size="mini" @click="showBuy" style="width:95px;height:28px;margin-left:20px;background-size:cover;background-image:url('/public/images/kaitonghuiyuaniconbg.png');" v-if="currentTallyId != 0 && userData['vip_status'] != 1"><img src="/public/images/iconhuiyuan.png" /> 开通会员</el-button>

                    <el-button round size="mini" @click="codeTallyShow=true" style="margin-left:20px;" v-if="currentTallyId != 0 && userData['vip_status'] != 1"><img src="/public/images/duihuanmaicon.png" /> 兑换码兑换</el-button>

                </el-col>

                <el-col :xl="8" :lg="8" :xl="8" :xs="8" :sm="8"  >
                    <el-menu text-color="#FFF" class="el-menu headerUserMenu"
                              mode="horizontal" >
                        <el-submenu index="6" v-if="userData" class="menuUser">
                            <template slot="title">
                                <i class="el-icon-s-custom icon-user"></i>
                                <span>{{userData.username ? userData.username : userData.mobile }}</span>
                            </template>
                            <el-menu-item index="6-1" v-if="userData">
                                <a href="/personal" style="display: inline-block;width: 100%;"><i class="el-icon-user"></i>个人中心</a>
                            </el-menu-item>
                            <el-menu-item index="6-2">
                                <a href="javascript:;"  style="display: inline-block;width: 100%;" v-on:click="logout"><i class="el-icon-switch-button"></i>安全退出</a>
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-col>
            </el-row>
        </div>
    </el-scrollbar>


    <!--账本新增 编辑表单框------>
    <tally-form :dialogShow="tallyAddDialog"  @modalClose="tallyModalClose"></tally-form>
    <buy-vip-dialog :dialogShow="buyTallyShow"  @modalClose="buyTallyModalClose"></buy-vip-dialog>
    <code-tally :dialogShow="codeTallyShow"  @modalClose="codeTallyModalClose"></code-tally>
        <!--       天数提醒-->
    <day-dialog :dialogShow="dayDialog"></day-dialog>
</el-row>
    `,
    computed: {
        currentTallyId() {
            return this.$store.state.currentTallyId
        },
        currentTally () {
            return this.$store.state.currentTally
        },
        userData () {
            return this.$store.state.userData
        },
        day () {
            return this.$store.state.day
        },
        tallyList () {
            return this.$store.state.tallyList
        },
        buyTallyShow(){
            return this.$store.state.buyTallyShow;
        },
        dayDialog(){
            return this.$store.state.dayDialog;
        },
    },
    data:function(){
        return {
            tallyAddDialog: false,
            codeTallyShow: false,
        }
    },
    mounted(){
        console.log(this.currentTallyId)
        // this.initData()

    },
    methods:{
        showBuy(){
            this.$store.state.buyTallyShow = true

        },
        tallyModalClose() {
          this.tallyAddDialog = false
        },
        codeTallyModalClose() {
          this.codeTallyShow = false
        },
        buyTallyModalClose() {
            this.$store.state.buyTallyShow = false
            console.log(this.buyTallyShow)
        },
        tallyChangeCommand(command){
            if(parseInt(this.currentTallyId)!== parseInt(command)){
                location.href = '/tally?id='+command
            }
        },
        logout(){
            let that = this
            let loginToken  =  localStorage.getItem('loginToken');
            axios.get('/api/user/logout',{
                method: 'get',
                headers: {'token': loginToken},
            }).then(function(res) {
                that.$message({
                    type: 'success',
                    message: '退出成功~跳转中...'
                });
                localStorage.removeItem('userInfo');
                localStorage.removeItem('loginToken');
                setTimeout(function () {
                    window.location.href='/';
                },1000)
            });
        },
    }
})
</script>
